<!DOCTYPE HTML>
<html>


<link rel="stylesheet" href="bootstrap-3.1.1/css/bootstrap.min.css">

<link rel="stylesheet" href="preview.css" />



<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="viewer/web/viewer.js"></script>
<script src="preview.js"></script>


<body>
	<div id="mainContainer">
		<div id="previewContainer">
			<iframe id="preview" class="iframePreview" src="viewer/web/viewer.html#locale=nl"></iframe>
		</div>
		<div id="actions">
			<table class="table table-striped">
		      <thead>
		        <tr>
		          <th>Action</th>
		          <th>Description</th>
		        </tr>
		      </thead>
		      <tbody>

		        <tr>
		          <td><button id="highlight-btn-first" type="button" class="btn btn-default">Highlight Fisrt segment</button></td>
		          <td>HighLight Segment description</td>
		        </tr>


		        <tr>
		          <td><button id="highlight-btn-last" type="button" class="btn btn-default">Highlight Last segment</button></td>
		          <td>HighLight Segment description</td>
		        </tr>


		        <tr>
		          <td><button id="setPreviewAsDirty-btn" type="button" class="btn btn-default">Set Preview as Dirty</button></td>
		          <td>Set Preview as Dirty</td>
		        </tr>

				<tr>
		          <td><button id="setPreviewAsClean-btn" type="button" class="btn btn-default">Set Preview as Clean</button></td>
		          <td>Set Preview as Clean</td>
		        </tr>

				<tr>
		          <td><button id="setPdf-btn" type="button" class="btn btn-default">Set pdf</button></td>
		          <td>Set a new PDF to be loaded into the preview</td>
		        </tr>


				<tr>
		          <td><button id="showMessageSuccess-btn" type="button" class="btn btn-default">Show Success Message</button></td>
		          <td>Showing a success message</td>
		        </tr>

		        <tr>
		          <td><button id="showMessageInfo-btn" type="button" class="btn btn-default">Show Info Message</button></td>
		          <td>Showing an info message</td>
		        </tr>

		        <tr>
		          <td><button id="showMessageWarning-btn" type="button" class="btn btn-default">Show Warning Message</button></td>
		          <td>Showing a warning message</td>
		        </tr>

		        <tr>
		          <td><button id="showMessageDanger-btn" type="button" class="btn btn-default">Show Danger Message</button></td>
		          <td>Showing a danger message</td>
		        </tr>

				<tr>
		          <td><button id="removeMessage-btn" type="button" class="btn btn-default">Remove Message</button></td>
		          <td>Remove Message</td>
		        </tr>

		        <tr>
		          <td><button id="welcomeMessage-btn" type="button" class="btn btn-default">Add Welcome Message</button></td>
		          <td>Add Welcome Message</td>
		        </tr>

		         <tr>
		          <td><button id="removeWelcomeMessage-btn" type="button" class="btn btn-default">Remove Welcome Message</button></td>
		          <td>Remove Welcome Message</td>
		        </tr>


		      </tbody>
			</table>	
		</div>
	</div>

<script>

	 $(document).ready(function() {
	    
		$("#highlight-btn-first").click(function(){
	 		highLightSegment("0+1+2");
	    }); 

		$("#highlight-btn-last").click(function(){
	        highLightSegment("0+21+1");
	    }); 

	    $("#setPreviewAsDirty-btn").click(function(){
	        setPreviewAsDirty("One or more edits have yet to be applied to the preview.");
	    });

 		$("#setPreviewAsClean-btn").click(function(){
 			setPreviewAsClean();
	    });

 		$("#setPdf-btn").click(function(){
	        setThePDFFile("file.pdf");
	    }); 

 		$("#showMessageSuccess-btn").click(function(){
			showMessageInNotificationBar("Showing an success message", "success");
	    }); 

		$("#showMessageInfo-btn").click(function(){
			showMessageInNotificationBar("Showing an info message", "info");
	    });

		$("#showMessageWarning-btn").click(function(){
			showMessageInNotificationBar("Showing an warning message", "warning");
	    });

		$("#showMessageDanger-btn").click(function(){
			showMessageInNotificationBar("Showing an danger message", "danger");
	    });
		
		$("#removeMessage-btn").click(function(){
			removeMessageFromNotificationBar();
	    });

		$("#welcomeMessage-btn").click(function(){
	    	addWelcomeMessage("Please select a file from the file list");
	    });

		$("#removeWelcomeMessage-btn").click(function(){
	        removeWelcomeMessage();
	    });

		

	 });

	
</script>

</body>
</html>